<!--
  文件描述：学生档案完整录入与编辑修改页面
  作者：XXX
  创建日期：2023-10-01
  最后修改日期：2023-10-01
  版本：1.0.0
  版权信息：© 2023 XXX公司
  文件名称及存储路径：frontend/templates/student_complete_record.html
-->
{% extends "layouts/base.html" %} {% block title %}学生档案完整录入与编辑修改{%
endblock %} {% block styles %}
<link
  rel="stylesheet"
  href="{{ url_for('static', filename='css/bootstrap.min.css') }}"
/>
<!-- 🔧 修复：使用CDN版本的Bootstrap图标，避免404错误 -->
<link
  rel="stylesheet"
  href="https://unpkg.com/bootstrap-icons@1.11.1/font/bootstrap-icons.css"
/>
<link
  rel="stylesheet"
  href="{{ url_for('static', filename='css/core.css') }}"
/>
<link
  rel="stylesheet"
  href="{{ url_for('static', filename='css/student_complete_record.css') }}"
/>
<!-- 🔧 新增：引入学生信息条组件样式 -->
<link
  rel="stylesheet"
  href="{{ url_for('static', filename='css/components/student-info-bar.css') }}"
/>
{% endblock %} {% block content %}
<div class="container-fluid">
  <h5 class="mt-3">学生档案完整录入与编辑修改</h5>

  <!-- 查询区域（配置驱动） -->
  <div class="row">
    <!-- 使用统一的配置驱动查询组件 -->
    <div id="fixedQueryArea"></div>
  </div>

  <!-- 查询结果表（配置驱动渲染） -->
  <div id="scrollable-content" class="col-12">
    <div class="card" id="search-results" style="display: none">
      <div class="card-body">
        <!-- 🔧 修复：使用QueryResultTable组件标准容器结构 -->
        <div id="queryResults" class="table-responsive">
          <table class="table table-striped table-hover">
            <thead id="queryTableHead" class="table-dark"></thead>
            <tbody id="queryTableBody"></tbody>
          </table>
          <!-- 分页容器 -->
          <nav aria-label="查询结果分页">
            <ul class="pagination justify-content-center" id="queryPagination"></ul>
          </nav>
        </div>
      </div>
    </div>

  <!-- 学生基本信息条（统一组件） -->
  <div id="student-info-bar" class="student-info-bar-row" style="display: none;">
    <!-- 由统一组件 renderStudentInfoBar() 动态渲染 -->
  </div>

  <!-- 学生档案详情 -->
  <div id="student-detail" style="display: none">
    <!-- 操作按钮区 -->
    <div class="action-buttons mb-4">
      <button type="button" class="btn btn-secondary" id="btn-back">
        返回列表
      </button>
      <button type="button" class="btn btn-outline-primary" id="btn-readonly">
        查看模式
      </button>
      <button type="button" class="btn btn-outline-warning" id="btn-edit">
        编辑模式
      </button>
      <button type="button" class="btn btn-outline-danger" id="btn-modify">
        修改模式
      </button>
      <button
        type="button"
        class="btn btn-primary"
        id="btn-save"
        style="display: none"
      >
        保存
      </button>
      <button type="button" class="btn btn-info" id="btn-vision-record">
        视力录入
      </button>
      <button
        type="button"
        class="btn btn-warning"
        id="btn-intervention-record"
      >
        干预录入
      </button>
      <button type="button" class="btn btn-success" id="btn-followup-record">
        随访录入
      </button>
      <button type="button" class="btn btn-secondary" id="btn-student-log">
        日志记录
      </button>
    </div>

    <form id="student-form">
      <!-- 基本信息 -->
      <div
        class="section-header"
        data-bs-toggle="collapse"
        data-bs-target="#basic-info"
        aria-expanded="true"
        aria-controls="basic-info"
      >
        <h6 class="mb-0">
          基本信息 <i class="bi bi-chevron-up toggle-icon"></i>
        </h6>
      </div>
      <div class="section-content collapse show" id="basic-info">
        <div class="row g-3">
          <!-- 🔧 配置驱动：字段将由JavaScript根据配置动态生成 -->
        </div>
      </div>

      <!-- 健康信息 -->
      <div
        class="section-header collapsed"
        data-bs-toggle="collapse"
        data-bs-target="#health-info"
        aria-expanded="false"
        aria-controls="health-info"
      >
        <h6 class="mb-0">
          健康信息 <i class="bi bi-chevron-down toggle-icon"></i>
        </h6>
      </div>
      <div class="section-content collapse" id="health-info">
        <div class="row g-3">
          <!-- 🔧 配置驱动：健康信息字段将由JavaScript根据配置动态生成 -->
        </div>
      </div>

      <!-- 视力记录 -->
      <div
        class="section-header collapsed"
        data-bs-toggle="collapse"
        data-bs-target="#vision-records"
        aria-expanded="false"
        aria-controls="vision-records"
      >
        <h6 class="mb-0">
          视力记录管理 <i class="bi bi-chevron-down toggle-icon"></i>
        </h6>
      </div>
      <div class="section-content collapse" id="vision-records">
        <div id="vision-records-container">
          <div class="alert alert-info">
            <h6><i class="bi bi-info-circle"></i> 视力数据管理</h6>
            <p>
              视力相关数据已迁移到专门的视力记录模块进行管理，请使用下方按钮进行操作：
            </p>
            <button
              type="button"
              class="btn btn-primary"
              id="btn-vision-record-inline"
            >
              <i class="bi bi-eye"></i> 管理视力记录
            </button>
          </div>
          <div class="text-muted mt-2">
            <small>最近视力检查：<span id="latest-vision-time">--</span></small>
          </div>
        </div>
      </div>

      <!-- 干预记录 -->
      <div
        class="section-header collapsed"
        data-bs-toggle="collapse"
        data-bs-target="#intervention-records"
        aria-expanded="false"
        aria-controls="intervention-records"
      >
        <h6 class="mb-0">
          干预记录管理 <i class="bi bi-chevron-down toggle-icon"></i>
        </h6>
      </div>
      <div class="section-content collapse" id="intervention-records">
        <div id="intervention-records-container">
          <div class="alert alert-warning">
            <h6><i class="bi bi-tools"></i> 干预数据管理</h6>
            <p>
              干预方式和操作记录已迁移到专门的干预记录模块进行管理，请使用下方按钮进行操作：
            </p>
            <button
              type="button"
              class="btn btn-warning"
              id="btn-intervention-record-inline"
            >
              <i class="bi bi-gear"></i> 管理干预记录
            </button>
          </div>
          <div class="text-muted mt-2">
            <small
              >最近干预日期：<span id="latest-intervention-time"
                >--</span
              ></small
            >
          </div>
        </div>
      </div>

      <!-- 随访记录 -->
      <div
        class="section-header collapsed"
        data-bs-toggle="collapse"
        data-bs-target="#followup-records"
        aria-expanded="false"
        aria-controls="followup-records"
      >
        <h6 class="mb-0">
          随访记录管理 <i class="bi bi-chevron-down toggle-icon"></i>
        </h6>
      </div>
      <div class="section-content collapse" id="followup-records">
        <div id="followup-records-container">
          <div class="alert alert-success">
            <h6><i class="bi bi-telephone"></i> 随访数据管理</h6>
            <p>
              电话随访记录请使用专门的随访记录模块进行管理，请使用下方按钮进行操作：
            </p>
            <button
              type="button"
              class="btn btn-success"
              id="btn-followup-record-inline"
            >
              <i class="bi bi-chat"></i> 管理随访记录
            </button>
          </div>
          <div class="text-muted mt-2">
            <small
              >最近随访日期：<span id="latest-followup-time">--</span></small
            >
          </div>
        </div>
      </div>
    </form>
  </div>
</div>
{% endblock %} {% block scripts %}
<script src="{{ url_for('static', filename='js/FixedQueryArea.js') }}"></script>
<!-- 🔧 新增：引入学生信息条组件 -->
<script src="{{ url_for('static', filename='js/components/student-info-bar.js') }}"></script>
<!-- 🔧 新增：引入QueryResultTable组件 -->
<script src="{{ url_for('static', filename='js/QueryResultTable.js') }}"></script>
<script src="{{ url_for('static', filename='js/student_complete_record.js') }}"></script>
<!-- 修复：移除重复的renderStudentTable函数定义，在JS文件中已定义 -->
{% endblock %}
